<!--
    组件说明：只适用于特定场景，不建议在其他地方导入使用
    需要传入数据：
        搜索参数-searchParameter: Object
        表格数据-tableData：Array（需要将图片数据放在第一项）
        数据举例：
            searchParameter: {
                page: 1,
                size: 5,
                keyWord: ''
            }
            tableData：[{
                prop: "picture",
                label: "图片",
                show： Boolean
            }]
    emit的方法：
        tableDataChange 传递新的表格数据数据的总数给父组件
    注意：
        watch 中监听着 searchParameter 中 page 和 size 的变化可以与 pagination 组件配合使用
    有疑惑之处可联系QQ : 1219951647
-->
<template>
  <div class="table">
        <template>
            <!-- table begin -->
            <el-table
            :data="tableData"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            >
            
                <!-- 左侧多选框 begin -->
                <el-table-column
                type="selection"
                width="55"
                >
                </el-table-column>
                <!-- 左侧多选框 end -->

                <!-- 图片列 begin -->
                <el-table-column
                v-if="this.$store.state.supplierWarnData.showPic"
                prop="picture"
                label="证书图片"
                align="center"
                >
                  <template slot-scope="scope">
                      <img class="img_style" :src="scope.row.picture">
                    <!-- <el-image
                    class="img_style"
                    :src="scope.row.picture"
                    >
                    </el-image> -->
                  </template>
                </el-table-column>
                <!-- 图片列 end -->

                <!-- 其他列 begin -->
                <template v-for="(item,index) in this.$store.state.supplierWarnData.tableCos">
                  <el-table-column
                  :key="index"
                  v-if="item.show"
                  :prop="item.prop"
                  :label="item.label"
                  align="center"
                  >
                  </el-table-column>
                </template>
                <!-- 其他列 end -->
                <el-table-column align="center">

                    <!-- 搜索框 begin -->

                    <!-- 看eslint报错不爽可以render-header解决 此处scope不要删，删除会导致输入框无法输入 -->
                    <template slot="header" slot-scope="scope"> 
                    <el-input
                    v-model="searchParameter.keyWord"
                    @keyup.enter.native="search(searchParameter)"
                    size="mini"
                    placeholder="输入公司名搜索"
                    width="100"/>
                    </template>
                    <!-- 搜索框 end -->

                    <!-- 修改和删除按钮 begin -->
                    <template slot-scope="scope">
                        <el-button 
                        type="warning" 
                        icon="el-icon-edit" 
                        v-auth="'breed_warn_update'"
                        @click="alter(scope.row)"
                        class="el-button--small"
                        >
                        </el-button>
                        <el-button 
                        type="danger" 
                        icon="el-icon-delete"
                        v-auth="'breed_warn_delete'"
                        @click="deleteRow(scope.row)"
                        class="el-button--small"
                        >
                        </el-button>
                  </template>
                  <!-- 修改和删除按钮 end -->
                </el-table-column>
            </el-table>
            <!-- table end  -->
        </template>

        <!-- AlterDialog begin -->
        <AlterCertificate :rowData="rowData" :isShowDialog="isShowDialog"></AlterCertificate>
        <!-- AlterDialog  -->
    </div>
</template>

<script>
// API
import { 
    searchByName, 
    deleCertificate 
} from "../../../../Api/productionmanage/warning/supplierWarning"

// Components
import AlterCertificate from '../supplierWarning/AlterCertificate'

export default {

    components: {
        AlterCertificate
    },

    props: {
        searchParameter: Object,
        tableData: Array
    },

    data() {
        return {
            multipleSelection: [],

            rowData: {},

            isShowDialog: {
                  value: false,
            },

            keyWord: '',
        }
    },

    watch: {

        // 监听搜索参数中的 page 变化（变化由分页组件产生）
        "searchParameter.page": {
            handler() {
                this.search( this.searchParameter )
            }
        },

        // 监听搜索参数中的 size 变化（变化由分页组件产生）
        "searchParameter.size": {
            handler() {
                this.search( this.searchParameter )
            }
        },
    },

    methods: {
        
        // 刷新表格
        refreshTable() {
            this.$emit("refreshTable")
        },

        // 表格左侧复选框改变回调
        handleSelectionChange( val ) {
            this.multipleSelection = val

            const deleteId = this.multipleSelection.map( item => {
                return item.id
            } )

            this.$store.commit( 'supplierWarnData/getDeleteId', deleteId )
        },

        // 删除行
        deleteRow( scope ) {
            this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleCertificate(scope.id).then( (res) => {
                    if( res.data.flag == true ) {
                        console.log('删除成功',res);
                        this.refreshTable()

                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                    }
                } ) 
            }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
            });
        },

        // 修改行
        alter( rowData ) {
              this.rowData = rowData
              this.isShowDialog.value = true
        },

         // 根据公司名搜索
        search( searchParameter ) {
            if( this.$store.state.supplierWarnData.searchWay !== 3 ) 
                this.$store.commit( 'supplierWarnData/changeSearchWay', 3 )

            searchByName( searchParameter ).then( res => {
                if( res.data.flag ) {
                    const sum = res.data.data.total
                    const { records : data } = res.data.data

                    this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    this.$emit("tableDataChange",data,sum)
                }
                else {
                    this.$message({
                        message: "暂无数据",
                        type: 'error'
                    });

                    this.$emit( "tableDataChange", null, 0 )
                }
            } )
        }
    }
}
</script>

<style scoped>
.img_style {
    width: 100px;
    height: 80px;
    border-radius: 5px;
}
</style>